<div id="div-normal" style="white-space: normal; width: 10em; border: solid black 1px; margin: 10px; padding: 10px;">
first <span style="color: red;">Hello 
Worlds</span> second 
second line <span style="color: blue;">World</span> third
</div>

<div id="div-pre" style="white-space: pre; width: 10em; border: solid black 1px; margin: 10px; padding: 10px;">
first <span style="color: red;">Hello 
Worlds</span> second 
second line <span style="color: blue;">World</span> third
</div>

<div id="div-pre2" style="white-space: pre; width: 10em; border: solid black 1px; margin: 10px; padding: 10px;">first <span style="color: red;">Hello 
Worlds</span> second 
second line <span style="color: blue;">World</span> third
</div>

<div id="div-pre3" style="white-space: pre; width: 10em; border: solid black 1px; margin: 10px; padding: 10px;">
first <span style="color: red;">Hello 
Worlds</span> second 
second line <span style="color: blue;">World</span> third
</div>

<div id="div-nowrap" style="white-space: nowrap; width: 10em; border: solid black 1px; margin: 10px; padding: 10px;">
first <span style="color: red;">Hello 
Worlds</span> second 
second line <span style="color: blue;">World</span> third
</div>

<div id="div-pre-wrap" style="white-space: pre-wrap; width: 10em; border: solid black 1px; margin: 10px; padding: 10px;">
first <span style="color: red;">Hello 
Worlds</span> second 
second line <span style="color: blue;">World</span> third
</div>

<div id="div-pre-wrap2" style="white-space: pre-wrap; width: 10em; border: solid black 1px; margin: 10px; padding: 10px;">first <span style="color: red;">Hello 
Worlds</span> second 
second line <span style="color: blue;">World</span> third
</div>

<div id="div-pre-line" style="white-space: pre-line; width: 10em; border: solid black 1px; margin: 10px; padding: 10px;">
first <span style="color: red;">Hello 
Worlds</span> second 
second line <span style="color: blue;">World</span> third
</div>